<template>
  <div class="delivery-page">
    <div class="header">
      <h1>配送方式</h1>
    </div>
    
    <div class="delivery-options">
      <div 
        :class="['option', { selected: deliveryMethod === 'collection' }]"
        @click="selectDeliveryMethod('collection')"
      >
        <div class="option-header">
          <div class="radio"></div>
          <h3>到店自取</h3>
        </div>
        <p class="option-desc">无需填写地址，到店自取</p>
      </div>
      
      <div 
        :class="['option', { selected: deliveryMethod === 'deliver' }]"
        @click="selectDeliveryMethod('deliver')"
      >
        <div class="option-header">
          <div class="radio"></div>
          <h3>配送</h3>
        </div>
        <p class="option-desc">需要填写配送地址</p>
        <div v-if="deliveryMethod === 'deliver'" class="address-input">
          <input 
            v-model="address" 
            placeholder="请输入配送地址" 
            class="address-field"
          />
        </div>
      </div>
    </div>
    
    <div class="actions">
      <button @click="goBack" class="back-btn">上一步</button>
      <button @click="next" class="next-btn">下一步</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '../store/orderStore'

export default {
  name: 'DeliveryPage',
  setup() {
    const router = useRouter()
    const orderStore = useOrderStore()
    const address = ref('')
    
    const deliveryMethod = computed(() => orderStore.deliveryMethod)
    
    const selectDeliveryMethod = (method) => {
      orderStore.setDeliveryMethod(method)
    }
    
    const goBack = () => {
      router.push('/checkout')
    }
    
    const next = () => {
      router.push('/payment')
    }
    
    return {
      deliveryMethod,
      address,
      selectDeliveryMethod,
      goBack,
      next
    }
  }
}
</script>

<style scoped>
.delivery-page {
  padding: 20px;
  padding-bottom: 80px;
}

.header h1 {
  color: #333;
  margin-bottom: 20px;
}

.delivery-options {
  margin: 20px 0;
}

.option {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  cursor: pointer;
}

.option.selected {
  border-color: #42b983;
  background-color: #f8fff8;
}

.option-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.radio {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
  margin-right: 15px;
}

.option.selected .radio {
  border-color: #42b983;
  background-color: #42b983;
  position: relative;
}

.option.selected .radio::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

.option h3 {
  margin: 0;
}

.option-desc {
  color: #666;
  margin: 0;
  margin-left: 35px;
}

.address-input {
  margin-top: 15px;
  margin-left: 35px;
}

.address-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: 0 auto;
}

.back-btn, .next-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.back-btn {
  background-color: #f0f0f0;
  color: #333;
}

.next-btn {
  background-color: #42b983;
  color: white;
}
</style>